<template>
  <div class="dayexamAnalysis tapStyle">
    <div class="toolbox">
      <div class="toolbox-row">
        <span>时间选择 : </span>
        <div class="layoutBox" style="width:242px">
              <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>&emsp;&emsp;
        <span>断面编码或名称 : </span>
        <div class="layoutBox" style="width:150px">
          <el-input v-model="sectionName" placeholder="请输入"></el-input>
        </div>&emsp;
        <span>所属行政区 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                <el-option
                  v-for="item in optionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </div>&emsp;&emsp;
        <span>所属流域 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                <el-option
                  v-for="item in optionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </div>&emsp;&emsp;
         <el-button @click=""><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="toolbox-row">
        <span>是否验收 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="">
                <el-option
                  v-for="item in optionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </div>&emsp;&emsp;
        <span>包&emsp;&emsp;件 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                <el-option
                  v-for="item in optionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </div>&emsp;&emsp;
      </div>
    </div>
    <div class="containerbox">
      <el-table
        :data="tableData"
        border
        height="100%">
        <el-table-column
          type="index"
          fixed
          label="序号">
        </el-table-column>
        <el-table-column
          prop="area"
          fixed
          width="130"
          label="行政区">
        </el-table-column>
        <el-table-column
          prop="basin"
          fixed
          width="130"
          label="流域">
        </el-table-column>
        <el-table-column
          prop="sectionName"
          fixed
          width="110"
          label="断面名称">
        </el-table-column>
        <el-table-column label="24小时零点漂移">

          <el-table-column  label="高锰酸盐">
            <el-table-column
              prop="gmsyReal"
              label="实传数量">
            </el-table-column>
            <el-table-column
              prop="gmsyQualified"
              label="合格数量">
            </el-table-column>
            <el-table-column
              prop="gmsyRate"
              label="合格率">
            </el-table-column>
          </el-table-column>
          <el-table-column  label="氨氮">
            <el-table-column
              prop="adReal"
              label="实传数量">
            </el-table-column>
            <el-table-column
              prop="adQualified"
              label="合格数量">
            </el-table-column>
            <el-table-column
              prop="adRate"
              label="合格率">
            </el-table-column>
          </el-table-column>
          <el-table-column  label="总磷">
            <el-table-column
              prop="zlReal"
              label="实传数量">
            </el-table-column>
            <el-table-column
              prop="zlQualified"
              label="合格数量">
            </el-table-column>
            <el-table-column
              prop="zlRate"
              label="合格率">
            </el-table-column>
          </el-table-column>

        </el-table-column>
        <el-table-column
          prop="subTime"
          width="160"
          label="24小时跨度漂移">

          <el-table-column  label="高锰酸盐">
            <el-table-column
              prop="gmsyRealK"
              label="实传数量">
            </el-table-column>
            <el-table-column
              prop="gmsyQualifiedK"
              label="合格数量">
            </el-table-column>
            <el-table-column
              prop="gmsyRateK"
              label="合格率">
            </el-table-column>
          </el-table-column>
          <el-table-column  label="氨氮">
            <el-table-column
              prop="adRealK"
              label="实传数量">
            </el-table-column>
            <el-table-column
              prop="adQualifiedK"
              label="合格数量">
            </el-table-column>
            <el-table-column
              prop="adRateK"
              label="合格率">
            </el-table-column>
          </el-table-column>
          <el-table-column  label="总磷">
            <el-table-column
              prop="zlRealK"
              label="实传数量">
            </el-table-column>
            <el-table-column
              prop="zlQualifiedK"
              label="合格数量">
            </el-table-column>
            <el-table-column
              prop="zlRateK"
              label="合格率">
            </el-table-column>
          </el-table-column>
        </el-table-column>

       <!-- <el-table-column
          prop="operation"
          label="操作">
          <template slot-scope="scope">
            <span style="color: #666">无相应权限</span>
          </template>
        </el-table-column>-->
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: "dayexamAnalysis",
  data() {
    return {
      dateRange: "", //时间选择
      sectionName: "", //断面名称
      value:'',
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      tableData: [{}],
      projectSet: false,
      dialogData: [
        {
          monitoringItems: "高锰酸钾",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        },
        {
          monitoringItems: "氨氮",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        },
        {
          monitoringItems: "总磷",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        },
        {
          monitoringItems: "总氮",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        }
      ]
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  }
};
</script>

<style scoped lang="less">
.dayexamAnalysis {
  height: calc(100% - 30px);
  .containerbox {
    padding: 6px 12px;
    height: calc(100% - 68px);
  }
}
.editInput {
  width: 50px;
  border: none;
  outline: none;
}
.toolbox-row {
  margin-bottom: 6px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
